<template>
	<view>
		<view class="head">
		</view>
		<image :src="avatar" mode="aspectFill" class="avatar" @click="person"></image>
		<view class="person" @click="person">
			个人主页 >
		</view>
		<view class="padding">
		</view>
		<view class="body">
			<view class="username">
				{{username}}
			</view>
			<view class="uid">
				ID: {{uid}}
			</view>
			<view class="div mar"></view>
			<view>
				<view class="inf" @click="myBesubscribed">
					<text class="num">{{fans}}</text>粉丝
				</view>
				<view class="inf" @click="mysubscribe">
					<text class="num">{{subcribe}}</text>关注
				</view>
				<view class="inf" @click="mypost">
					<text class="num">{{post}}</text>发帖
				</view>
			</view>
			<view class="div mar"></view>
		</view>
		<u-cell-group :border="false">
			<u-cell isLink @click="mypost">
				<text slot="title" class="card">我的帖子</text>
				<view slot="icon" class="icon">
					<u-icon name="grid-fill" size="60"></u-icon>
				</view>
			</u-cell>
			<u-cell isLink @click="mysubscribe">
				<text slot="title" class="card">我的关注</text>
				<view slot="icon" class="icon">
					<u-icon name="heart-fill" size="60"></u-icon>
				</view>
			</u-cell>
			<u-cell isLink @click="myBesubscribed">
				<text slot="title" class="card">我的粉丝</text>
				<view slot="icon" class="icon">
					<u-icon name="account-fill" size="60"></u-icon>
				</view>
			</u-cell>
			<u-cell isLink @click="mycollect">
				<text slot="title" class="card">我的收藏</text>
				<view slot="icon" class="icon">
					<u-icon name="star-fill" size="60"></u-icon>
				</view>
			</u-cell>
			<u-cell isLink @click="setting">
				<text slot="title" class="card">设置</text>
				<view slot="icon" class="icon">
					<u-icon name="setting-fill" size="60"></u-icon>
				</view>
			</u-cell>
		</u-cell-group>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				fans: 0,
				subcribe: 0,
				post: 0,
			}
		},
		onShow() {
			this.getFans()
			this.getSubsribe()
			this.getPost()
		},
		methods: {
			getFans() {
				this.$request.TokenRequest({
					url: "/user/myBeSubscribedNum"
				}, {
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200)
						this.fans = res.data.num
				})
			},
			getSubsribe() {
				this.$request.TokenRequest({
					url: "/user/mySubscribeNum"
				}, {
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200)
						this.subcribe = res.data.num
				})
			},
			getPost() {
				this.$request.TokenRequest({
					url: "/user/myPostNum"
				}, {
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200)
						this.post = res.data.num
				})
			},
			mypost() {
				uni.navigateTo({
					url: "my_post/my_post"
				})
			},
			mysubscribe() {
				uni.navigateTo({
					url: "../subscribe_list/subscribe_list?type=1"
				})
			},
			myBesubscribed() {
				uni.navigateTo({
					url: "../subscribe_list/subscribe_list?type=2"
				})
			},
			mycollect() {
				uni.navigateTo({
					url: "../collect/collect"
				})
			},
			setting() {
				uni.navigateTo({
					url: "../setting/setting"
				})
			},
			person() {
				// console.log("个人主页")
				uni.navigateTo({
					url: "../pserson_info/pserson_info?uid=" + this.$store.state.user.uid
				})
			},

		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			username() {
				return this.$store.state.user.username
			},
			uid() {
				return this.$store.state.user.uid
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 100%;
		height: 280rpx;
		background-image: url("@/static/img/my/back2.jpg");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.avatar {
		position: absolute;
		top: 230rpx;
		left: 40rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		border: 8rpx solid #FFFFFF;
	}

	.person {
		position: absolute;
		top: 300rpx;
		right: 0;
		font-size: 30rpx;
		color: #1F2022;
		background-color: #F0F1F5;
		padding: 12rpx 30rpx 12rpx 20rpx;
		border-radius: 10rpx 0 0 10rpx;
	}

	.padding {
		height: 165rpx;
	}

	.body {
		margin: 0 auto;
		width: 90%;
	}

	.username {
		font-size: 50rpx;
		font-weight: bold;
		max-width: 500rpx;
		overflow-y: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.uid {
		font-size: 30rpx;
		margin: 15rpx 0;
	}

	.div {
		height: 5rpx;
		background-color: #F6F6F6;
	}

	.mar {
		margin: 30rpx 0;
	}

	.inf {
		display: inline-block;
		padding-right: 40rpx;
		color: #C1C6C9;
		font-size: 30rpx;
	}

	.num {
		color: #000;
		font-size: 40rpx;
		padding-right: 8rpx;
	}

	.card {
		font-size: 35rpx;
	}

	/deep/.u-cell .u-line {
		display: none;
	}
</style>
